<template>
    <div class="xhhzcx_box">
        <header-comm></header-comm>
       
        <!-- 表格 -->
        <div class="bcg left_bcg">
            <div class="hedlist">
                 <div class="head_box" >
                    <div class="sele">
                        <span>状态：</span>
                        <a-button disabled>已执行</a-button>
                    </div>
                    <div class="addnew_box" v-if="$store.state.tjwz">
                        <addydtk></addydtk>
                    </div>
                </div>
            </div>
            <div class="xhhzcx_table">
                 <a-table
                    @change="handleChangelist"
                    :loading="loading"
                    :columns="columns"
                    :pagination="pagination"
                    :dataSource="data"
                    :rowKey="(record,index)=>{return index}"
                >
                <template slot="XSDH" slot-scope="text, record,">
                   <div  class="ymInfo_yc yc" >
                        <a-tooltip placement="topLeft" :title="record.XSDH">{{record.XSDH}}
                        </a-tooltip>
                    </div>
                </template>
                <template slot-scope="tags" slot="SHBJ">
                        <span>
                            <a-tag   color="#87d068" v-if="tags=='已确定'">{{tags}}</a-tag>
                            <a-tag   color="rgb(35, 163, 255)" v-else>{{tags}}</a-tag>
                        </span>
                </template>
                <template slot="addyd" slot-scope="text, record, index">
                    <div class="editable-row-operations">
                        <a  @click="()=>addyd(record)">添加运单</a>
                        <a-tooltip class="ysdh" placement="topLeft" arrow-point-at-center :title="record.YSDH">{{record.YSDH}}
                        </a-tooltip>
             
                    </div>
                </template>
                </a-table>
                <!-- <a-pagination v-if="isShow"
                    :total="totalNum"
                    :show-total="total => `共${total} 条数据`"
                    @change="onPageChange"
                    :page-size="pagination.defaultPageSize"
                /> -->
            </div>
        </div>
    <rightnav></rightnav>

    </div>
</template>

<script>
import qs from "qs";
import headerComm from "../../header-comm/header";
import addydtk from "./addydtk.vue";
import rightnav from "../rightnav.vue";

// 引入表格的列
const columns =[
    {
        title:"销售单号",
        dataIndex: "XSDH",
        className:'ymInfo_colme',
        scopedSlots: {
            customRender: "XSDH",
        },
    },
    {
        title:"客户名称",
        dataIndex: "DWMC",
    },
    // {
    //     title: '添加运单',
    //     dataIndex: 'addyd',
    //     scopedSlots: { customRender: 'addyd' },
    // },
    {
        title:"数量合计",
        dataIndex: "ZXHSL",
        scopedSlots: {
            customRender: "ZXHSL",
        },
        className:'sl_style'
    },
   
    {
        title:"运输单号",
        dataIndex: "YSDH",
        scopedSlots: { customRender: 'addyd' },
    },
    {
        title:"运输方式",
        dataIndex: "YSFS",
    },
    {
        title:"制单人",
        dataIndex: "ZDR",
    },
    {
        title:"执行时间",
        dataIndex: "ZXRQ",
    },
    {
        title:"状态",
        dataIndex: "SHBJ",
        scopedSlots: {
            customRender: "SHBJ",
        }
    },
    
  
]
export default {
    data(){
        return{
            data:null,
            columns,
            loading:true,
            //数据库名称
            database:'ERP2_BEARING',
            // ip地址
            ip:'122.112.240.180',
            ceqybm:'7401',
            pagination: {
                defaultPageSize: 10,
                // showTotal: total => `共 ${total} 条数据`,
                // total: 0,
                current: 1,
                showTotal: total => `共 ${total} 条数据`,
                total:0
            },
            // 总条数
            totalNum:0,
            // 控制页脚隐藏
            isShow:true
            }
    },
     components: {
        headerComm,
        addydtk,
        rightnav
    },
    methods:{

        // 跳转获取运单号
        addyd(render){
            console.log(render);
            this.$store.state.tjwz = true;
            // this.$router.push({path:"/addydxx",query:render});
            this.$store.state.xsdinfo=render;
        },
         // 表格数据
        handleChangelist(pagination){
            this.pagination.current = pagination.current;
            this.axios
                .post(
                    "https://yb.bearing.cn/wxapi/smt_newWaybillList.php",
                    qs.stringify({
                        page:pagination.current,
                        pageSize:this.pagination.defaultPageSize,
                        token:sessionStorage.getItem('smt_token'),
                    })
                ).then(res=>{
                    console.log(res)
                    // if(res.data.result.resDate){
                    //     this.data=res.data.result.resDate
                    //     this.loading=false;
                    //     console.log(this.data)
                    // }
                    if(res.data.code==103){
                        this.data=res.data.result.resDate
                        this.loading=false;
                        this.isShow=true;
                        // console.log(this.data)
                        // this.totalNum=Number(res.data.result.totalDataNum);
                        this.pagination.total = Number(res.data.result.totalDataNum);
                    }else{
                        this.totalNum=Number(0);
                        this.data=[]
                        this.loading=false;
                        this.isShow=false;
                    }
                    
                })
        },
         // 分页数据展示
        onPageChange(current){
            console.log(current);
            this.pagination.current=current;
            this.handleChangelist(this.pagination);
        },
    },
    created(){
        this.handleChangelist(this.pagination);
    }
}
</script>

<style lang="less" >
    .xhhzcx_box{
        .hedlist {
                position: fixed;
                z-index: 999;
                width: 71%;
                left: 10%;
                top: 50px;
                height: 90px;
                line-height: 60px;
                background-color: #f3f7f9;
                .head_box{
                    width: 100%;
                    display: flex;
                    // justify-content: space-around;
                    background-color: #fff;
                    flex-wrap: wrap;
                .sele{
                    // margin-bottom: 15px;
                    margin: 0 20px;
                    text-align: center;
                    position: relative;
                    .sele_input{
                        width: 170px;
                    }
                    .ant-select-selection__clear{
                        right: 50px;
                    }
                    .ant-select-auto-complete.ant-select .ant-input{
                       height: 32px!important;
                    }
                    .ant-btn-lg{
                        height: 32px!important;
                    }
                    .search {
                        position: absolute;
                        top: 8px;
                        right: 15px;
                        font-size: 18px;
                    }
                }
                .rqsele{
                    text-align: center;
                    margin: 0 20px;
                    margin-bottom: 15px;
                    .rq_input{
                        width: 250px;
                    }
                }
                .list_head {
                    display: inline-block;
                    margin-right: 10px;
                }
                .ssgs_box{
                    display: inline-block;
                    margin-right: 20px;
                }
            }
        }
        .bcg {
            width: 90%;
            background-color: #f3f7f9 !important;
            position: relative;
            left: 10%;
            min-height: 1000px;
            .xhhzcx_table{
                width: 100%;
                position: relative;
                left: 1%;
                top:140px;
                width: 98%;
                text-align: left;
                padding: 20px;
                background: #fff;
                .ysdh{
                    text-align: left;
                    display: inline-block;
                    min-width: 80px;
                    text-align: center;
                    margin-left: 10px;
                }
                 // 表头商品名称
                .XLQZ_colme{
                width: 70px;
                }
                .ymInfo_colme{
                width: 128px;
                
                }
                .xl_colme{
                width: 150px;
                }
                // 溢出隐藏公共
                .yc{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .spmc_yc{
                    width:70px;
                }
                .ymInfo_yc{
                    width: 128px;
                    font-size: 12px;
                }
                .xl_yc{
                    width: 150px;
                }
                // 下拉搜索框公共
                .dropdown_all{
                    margin-left: 8px; 
                    padding:8px;
                    .dropdown_input{
                        width: 188px;
                        margin-bottom: 8px;
                        display: block;
                    }
                    .dropdown_btn{
                        width: 90px;
                    }
                    .dropdown_btn1{
                        margin-left: 8px;
                    }
                }
 
                .ant-table-thead {
                    background-color: #ccc !important;
                }
                .ant-table-tbody {
                    background: #fff !important;
                }
              
            }
            .ant-pagination{
                float: right!important;
                margin-top: 20px;
            }
        }
    }
</style>